<template>
  <div class="skeleton" :style="{ width, height }">
    <div :style="{ background: bgc }" class="a"></div>
  </div>
</template>

<script>
export default {
  props: {
    bgc: {
      type: String,
      default: "#ccc",
    },
    width: {
      type: String,
      default: "50px",
    },
    height: {
      type: String,
      default: "20px",
    },
  },
};
</script>

<style lang="scss" scoped>
.skeleton {
  margin: 0px 3px;
  & > div {
    width: 100%;
    height: 100%;
    display: inline-block;
    border-radius: 5px;
  }
}
.a:after {
  /* 内容区域空状态时追加骨架屏样式 */
  content: "";
  display: block;
  width: 50px;
  height: 20px;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(225, 225, 225, 0.753),
    transparent
  );
  animation: loading 1s infinite;
}

@keyframes loading {
  /* 骨架屏的动画 */
  100% {
    transform: translateX(10%);
  }
}
</style>
